<template>
    <text @click="iconClicked" :class="['icon','iconfont','icondanseshixintubiao-3', `icon-size-${size}`]" :style="{color:color}">{{_ucode}}</text>
</template>

<script>

    var icons = {
        'arrow-up': '\ue657',
    }

    export default {
        name: "yx-icon",
        props:{
            /**
             * 尺寸
             * xxs xs sm md  mm lg
             */
            size: {
                type: String,
                default: 'sm'
            },
            /**
             * 颜色
             */
            color: {
                type: String,
                default: 'white'
            },

            /**
             * 字体图标
             */
            ucode: {
                type: String,
                default: ''
            },

            click: {
                type: Object
            }
        },
        beforeCreate(){

            const dom = weex.requireModule('dom')
            dom.addRule('fontFace', {
                'fontFamily': 'iconfont',
                'src': "url('https://at.alicdn.com/t/font_1100792_poljkfw3bqd.ttf')"
            })
        },
        computed:{
            _ucode(){
                let code = `&#x${this.ucode};`.replace(/['"]*/g,'')
                return unescape(code.replace(/&#x/g,'%u').replace(/;/g,''))
            }
        },
        methods:{
            /**
             * 图标点击事件
             */
            iconClicked(e){
                this.$emit('click',e)
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import "yx-icon";
    .iconfont {
        font-family:iconfont;
    }
</style>


